<template>
	<view>
		<u-sticky>
			<view class="tabs">
				<view class="tabs-11">
					<view v-for="(item, index) in tablist" :key="index" class="tabs-22"
						:class="{ 'active': isSelected1 === index }" @click="selectTab1(index)">
						{{ item.name }}({{ item.num }})
					</view>
				</view>
				<view class="tabs-1" v-if="isSelected1 == 0">
					<view v-for="(item, index) in tablist1" :key="index" class="tabs-2"
						:class="{ 'active': isSelected === index }" @click="selectTab(index)">
						{{ item.name }}({{ item.num }})
					</view>
				</view>
				<view class="tabs-1" v-else>
					<view v-for="(item, index) in userTabList" :key="index" class="tabs-2"
						:class="{ 'active': isSelected === index }" @click="selectTab(index)">
						{{ item.name }}({{ item.num }})
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="content">
			<view class="list" v-for="(item, index) in userList" :key="index" @click="userDetail(item)">
				<view class="left">
					<image class="avator" :src="rq.imgUrl(item.avatar)" mode=""></image>
					<text class="city">{{ item.city ? item.city.name : '' }}</text>
				</view>
				<view class="right">
					<view class="r1">
						<view class="name">
							{{ item.nickname || '' }}
						</view>
						<view class="time">
							{{ item.createtime || item.createtimes || '' }}
							<span class="status1"
								v-if="item.user.status == 'normal' || item.status == 'normal'">正常</span>
							<span class="status2"
								v-if="item.user.status == 'hidden' || item.status == 'hidden'">冻结</span>
						</view>
					</view>
					<view class="r2">
						ID：{{ item.id }}&nbsp;&nbsp;
						{{ item.gender === 1 ? '男' : '女' }}&nbsp;&nbsp;
						{{ item.age ? item.age : '' }}
					</view>
					<view class="r3">
						<view class="r3-item">
							消费：<span class="num">{{ item.total_amount || 0 }}</span>
						</view>
						<view class="r3-item">
							返佣：<span class="num">{{ item.total_commission || 0 }}</span>
						</view>
						<view class="r3-item">
							帖子：<span class="num">{{ item.post_count || 0 }}</span>
						</view>
						<view class="r3-item">
							活动：<span class="num">{{ item.activity_count || 0 }}</span>
						</view>
					</view>
					<view class="r5" v-if="isSelected1 == 0">
						<view class="item">
							<view class="text">
								状态：<span class="status item-status" v-if="item.weigh > 0">推荐{{ item.weigh || 0 }}</span>
								<view v-else style="display: inline;">
									<span class="status item-status1" v-if="item.user.statusstatus == '1'">正常</span>
									<span class="status item-status2" v-if="item.user.statusstatus == '-1'">下架</span>
									<span class="status item-status3" v-if="item.user.statusstatus == '2'">驳回</span>
									<span class="status item-status4" v-if="item.user.statusstatus == '0'">待审</span>
								</view>
							</view>
							<view class="vip">
								<image :src="rq.imgUrl(item.logo)" mode=""></image>
							</view>
						</view>
						<view class="item">
							评分：{{ item.pingfen || 0 }}分&nbsp;&nbsp;&nbsp;&nbsp;
							完结：{{ item.order_count || 0 }}单
						</view>
						<view class="item">
							收益：{{ item.income || 0 }}元
						</view>
						<view class="item">
							微信：{{ item.wechat_account || '' }}
						</view>
						<view class="item">
							电话：{{ item.mobile || '' }}
						</view>
						<view class="item">
							地址：{{ item.address || '' }}
						</view>
					</view>
					<view class="r4">
						<view class="text">
							邀请人：<span class="text-1">{{ item.first_name ? item.first_name : '---' }}</span>
						</view>
						<image class="icon-image" style="" src="https://pw.qyang.cc/static/icon-phone.png" mode=""
							@click.stop="call(item)"></image>
						<image class="icon-image" style="width: 16px;height: 16px;"
							src="https://pw.qyang.cc/static/svg/message.svg" mode="" @click.stop="send(item)"></image>
						<view class="btn1" @click.stop="userCheck(item)">
							查看
						</view>
						<view class="btn2" @click.stop="userManage(item)">
							管理
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="showManage1" :round="10" mode="bottom" @close="showManage1 = false" @open="showManage1 = true">
			<view class="pop-content">
				<view class="title">
					管理
				</view>
				<view class="con">
					<view class="con3">账户状态
						<view class="con1" style="justify-content: start;">
							<view class="con1-2" style="margin-right: 80rpx;" @click="selectUserStatus('normal')">
								<image class="btn-img1" v-if="userModel.status == 'normal'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								正常
							</view>
							<view class="con1-2" @click="selectUserStatus('hidden')">
								<image class="btn-img1" v-if="userModel.status == 'hidden'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								冻结
							</view>
						</view>
					</view>
				</view>
				<view style="height: 60px; width: 100%;"></view>
				<view class="pop-bottom">
					<view class="btn1" @click="showManage1 = false">
						取消
					</view>
					<view class="btn2" @click="editUserStatus">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="showManage2" :round="10" mode="bottom" @close="showManage2 = false" @open="showManage2 = true">
			<view class="pop-content">
				<view class="title">
					管理
				</view>
				<view class="con">
					<view class="con3">账户状态
						<view class="con1" style="justify-content: start;">
							<view class="con1-2" style="margin-right: 80rpx;" @click="selectStatus1('normal')">
								<image class="btn-img1" v-if="darenModel.status == 'normal'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								正常
							</view>
							<view class="con1-2" @click="selectStatus1('hidden')">
								<image class="btn-img1" v-if="darenModel.status == 'hidden'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								冻结
							</view>
						</view>
					</view>
					<view class="con3">达人状态
						<view class="con1">
							<view class="con1-2" @click="selectStatus('1')">
								<image class="btn-img1" v-if="darenModel.statusstatus == '1'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								正常
							</view>
							<view class="con1-2" @click="selectStatus('-1')">
								<image class="btn-img1" v-if="darenModel.statusstatus == '-1'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								下架
							</view>
							<view class="con1-2" @click="selectStatus('2')">
								<image class="btn-img1" v-if="darenModel.statusstatus == '2'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								驳回
							</view>
							<view class="con1-2" @click="selectStatus('0')">
								<image class="btn-img1" v-if="darenModel.statusstatus == '0'"
									src="https://pw.qyang.cc/static/commit-success.png" mode="">
								</image>
								<image class="btn-img1" v-else src="https://pw.qyang.cc/static/selected-null.png"
									mode=""></image>
								待审
							</view>
						</view>
					</view>
					<view class="is_recommend">
						是否推荐
						<view>
							<u-switch space="2" @change="recomendChange" :value="darenModel.flag == 1"
								activeColor="#84E28D" inactiveColor="#F6F6F6">
							</u-switch>
						</view>
					</view>
					<view class="con2">
						推荐
						<input class="number tuijian-input" type="number" v-model="darenModel.weigh"
							placeholder="请输入推荐值数值" border="none" inputAlign="right"></input>
					</view>

					<view class="con3">
						操作说明 <span class="con3-text">（说明文字将同步到用户）</span>
						<view class="con3-input">
							<u--textarea v-model="darenModel.bio" placeholder="请输入"></u--textarea>
						</view>
					</view>
				</view>
				<view style="height: 60px; width: 100%;"></view>
				<view class="pop-bottom">
					<view class="btn1" @click="showManage2 = false">
						取消
					</view>
					<view class="btn2" @click="editDarenStatus">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isSelected: 0,
			isSelected1: 0,
			showManage1: false, //普通用户
			showManage2: false, //达人
			tablist: [{
				name: '达人',
				num: 0
			}, {
				name: '用户',
				num: 0
			}],
			userTabList: [{
				name: '全部',
				num: 0,
				status: ''
			}, {
				name: '正常',
				num: 0,
				status: 'normal'
			}, {
				name: '冻结',
				num: 0,
				status: 'hidden'
			}],
			tablist1: [{
				name: '全部',
				num: 0,
				status: null
			}, {
				name: '推荐',
				num: 0,
				status: '1'
			}, {
				name: '正常',
				num: 0,
				status: '2'
			}, {
				name: '下架',
				num: 0,
				status: '3'
			}, {
				name: '驳回',
				num: 0,
				status: '4'
			}],
			userList: [],
			total: 0,
			params: {
				page: 1
			},
			darenTotal: 0,
			hidden: 0,
			rejected: 0,
			recommend_total: 0,
			normal: 0,
			userTotal: 0,
			userModel: {
				status: 'normal'
			},
			darenModel: {
				weigh: '',
				bio: '',
				flag: 0,
				statusstatus: '1',
				status: 'normal'
			}
		};
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.getDarenList()
		uni.hideNavigationBarLoading()
	},
	onReachBottom() {
		if (this.userList.length < this.total) {
			this.params.page++
			if (this.isSelected1 == 0) {
				this.getDarenList(true)
			} else {
				this.getUserList(true)
			}
		}
	},
	onLoad() {
		this.getDarenList()
	},
	methods: {
		getDarenList(more) {
			this.rq.getData('agent/daren', this.params).then(res => {
				this.userList = more ? [...this.userList, ...res.data.list.data] : res.data.list.data
				this.total = res.data.list.total
				this.tablist1[0].num = this.tablist[0].num = res.data.total
				this.tablist1[3].num = res.data.hidden	//下架
				this.tablist1[4].num = res.data.rejected	//驳回
				this.tablist1[1].num = res.data.recommend_total	//推荐
				this.tablist1[2].num = res.data.normal	//正常
				this.tablist[1].num = res.data.user_total
				uni.stopPullDownRefresh()
			}).catch(() => {
				uni.stopPullDownRefresh()
			})
		},
		getUserList(more) {
			this.rq.getData('agent/member', this.params).then(res => {
				this.userList = more ? [...this.userList, ...res.data.list.data] : res.data.list.data
				this.total = res.data.list.total
				this.userTabList[0].num = res.data.total
				this.userTabList[1].num = res.data.normal	//下架
				this.userTabList[2].num = res.data.hidden	//驳回

				this.tablist[0].num = res.data.daren
				this.tablist[1].num = res.data.total
				uni.stopPullDownRefresh()
			}).catch(() => {
				uni.stopPullDownRefresh()
			})
		},
		selectTab(index) {
			this.isSelected = index;
			if (this.isSelected1 === 0) {
				this.params.status = this.tablist1[index].status
				this.params.page = 1
				this.getDarenList()
			} else {
				this.params.status = this.userTabList[index].status
				this.params.page = 1
				this.getUserList()
			}
		},
		selectTab1(index) {
			this.isSelected1 = index;
			this.isSelected = 0
			this.params = {
				page: 1
			}
			if (index === 0) {
				this.params.status = this.tablist1[0].status
				this.getDarenList()
			} else {
				this.params.status = this.userTabList[0].status
				this.getUserList()
			}
		},
		selectStatus(i) {
			this.darenModel.statusstatus = i;
		},
		selectStatus1(i) {
			this.darenModel.status = i;
		},
		selectUserStatus(i) {
			this.userModel.status = i;
		},
		call(item) {
			uni.makePhoneCall({
				phoneNumber: item.mobile
			});
		},
		send(item) {
			uni.navigateTo({
				url: '/subpages/message/chat?id=' + item.id + 'type=manage'
			})
		},
		userCheck(item) {
			uni.navigateTo({
				url: '/subpages/set/userInfo?id=' + item.user_id + '&type=manage'
			})
		},
		userManage(item) {
			if (this.isSelected1 == 1) {
				// 普通用户
				this.showManage1 = true
				this.rq.getData('agent/user_status_detail', { id: item.user_id }).then(res => {
					this.userModel = res.data
				}).finally(() => {
					this.userModel.id = item.user_id
				})
			} else {
				// 达人
				this.showManage2 = true
				this.rq.getData('agent/daren_status_detail', { id: item.user_id }).then(res => {
					this.darenModel = res.data
				}).finally(() => {
					this.darenModel.id = item.user_id
				})
			}
		},
		recomendChange(e) {
			this.darenModel.flag = e ? 1 : 0
		},
		editDarenStatus() {
			this.rq.getData('Agent/daren_status', this.darenModel).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功~',
						icon: 'none'
					})
					this.params.page = 1
					this.getDarenList()
					this.showManage2 = false
				}
			})
		},
		editUserStatus() {
			this.rq.getData('agent/user_status', this.userModel).then(res => {
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功~',
						icon: 'none'
					})
					this.params.page = 1
					this.getUserList()
					this.showManage2 = false
				}
			})
		},
		userDetail(item) {
			return;
			uni.navigateTo({
				url: '/subpages/talent/talent?id=' + item.user_id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.is_recommend {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 28rpx;
	margin: 40rpx 10rpx 0;

	&::v-deep .u-switch {
		width: 64rpx !important;
		height: 30rpx !important;
		border-radius: 10rpx !important;
	}

	&::v-deep .u-switch__node {
		width: 27.43rpx !important;
		height: 27rpx !important;
		border-radius: 8rpx !important;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(157, 170, 149, 0.251);
		transform: translateX(0rpx) !important;
	}

	&::v-deep .u-switch__node.false {
		transform: translateX(-33rpx) !important;
	}
}

.pop-content {
	width: 100%;
	padding: 36rpx 0 20rpx 0;
	font-family: PingFang SC;
	font-size: 15px;
	font-weight: normal;
	line-height: 15px;
	letter-spacing: 0px;
	color: #333333;

	.con {
		margin: 20rpx 30rpx;
	}

	.con1 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		color: #333333;

		.con1-2 {
			margin-right: 20rpx;
			display: flex;
			align-items: center;
		}

		image {
			width: 16px;
			height: 16px;
			margin-right: 20rpx;
		}
	}

	.con2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		margin: 40rpx 10rpx;
		color: #333333;

		.input {
			width: 81.19%;
			height: 34px;
			border-radius: 8px;
			opacity: 1;

			background: #F6F6F6;

		}
	}

	.con3 {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		margin: 40rpx 10rpx;
		color: #333333;

		.con3-text {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #FF7681;
		}

		.con3-input {
			margin-top: 20rpx;
		}

		.con3-photo {
			margin-top: 20rpx;

			.btn {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8px;
				opacity: 1;
				background: #F7F7F7;
				box-sizing: border-box;
				border: 0.5px solid #C4C4C4;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 10px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;

				color: #B8B8B8;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.title {
		text-align: center;
	}

	.title-1 {
		margin: 10rpx 30rpx;

		.input {
			width: 89.07%;
			height: 34px;
			border-radius: 8px;
			opacity: 1;
			background: #F6F6F6;
			display: flex;
			align-items: center;
			justify-content: start;
			line-height: 34px;
			padding: 0 20rpx;
			margin: 20rpx 0;
		}

		.status {
			display: flex;
			flex-wrap: wrap;
			margin: 20rpx 0;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;

			color: #999999;

			.status-item {
				width: 100px;
				height: 40px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				margin: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.status-item.active {
				background: #ff5866;
			}

		}

		.time {
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20rpx 0;

			.time1 {
				width: 145px;
				height: 40px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0 30rpx;
			}
		}
	}

	.pop-bottom {
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		text-align: center;
		letter-spacing: 0px;
		height: 60px;
		width: 100%;
		justify-content: center;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);

		.btn1 {
			width: 133px;
			height: 37px;
			border-radius: 102px;
			opacity: 1;
			background: #F7F7F7;
			border: 1px solid #F7F7F7;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 80rpx;
		}

		.btn2 {
			color: #ffffff;
			width: 133px;
			height: 37px;
			border-radius: 102px;
			opacity: 1;
			background: #FF5866;
			border: 1px solid #FF5866;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.content {
	margin-top: 20rpx;
	width: 100%;
	box-sizing: border-box;

	.list {
		width: 90%;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		padding: 20rpx;
		padding-left: 0;

		.left {
			// margin-right: 20rpx;
			width: 120rpx;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;

			.avator {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.city {
				font-size: 22rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				display: block;
				width: 100rpx;
				text-align: center;
			}
		}

		.right {
			width: 100%;
			padding-right: 20rpx;

			.r1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;

				.name {
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 12px;
					letter-spacing: 0px;

					color: #333333;
				}

				.time {
					font-family: 阿里巴巴普惠体;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;
					color: #999999;

					.status1 {
						margin-left: 20rpx;
						color: #34C759;
					}

					.status2 {
						margin-left: 20rpx;
						color: #C73434;
					}
				}
			}

			.r2 {
				font-family: 阿里巴巴普惠体;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				color: #999999;
				padding-bottom: 20rpx;
			}

			.r3 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;

				.r3-item {
					font-family: 阿里巴巴普惠体;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;
					color: #999999;

					.num {
						color: #FF7681;
					}
				}
			}

			.r4 {
				display: flex;
				align-items: center;
				height: 50rpx;
				justify-content: space-between;

				.text {
					font-family: 阿里巴巴普惠体;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: 0px;
					color: #999999;
					display: block;
					width: 200rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;

					.text-1 {
						color: #00BC56
					}
				}

				.icon-image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx;
				}

				.btn1 {
					width: 116rpx;
					height: 44rpx;
					border-radius: 102px;
					opacity: 1;
					background: #F7F7F7;
					border: 1px solid #F7F7F7;
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					text-align: center;
					letter-spacing: 0px;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.btn2 {
					width: 116rpx;
					height: 44rpx;
					border-radius: 102px;
					opacity: 1;
					background: #FF7681;
					border: 1px solid #FF7681;
					font-family: 阿里巴巴普惠体 2.0;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 24rpx;
					text-align: center;
					letter-spacing: 0px;
					color: rgba(255, 255, 255, 0.9216);
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.r5 {
				border-radius: 8px;
				opacity: 1;
				background: #FFF3F6;
				box-sizing: border-box;
				border: 1px solid #FFB8BE;
				padding: 10rpx 20rpx;
				margin-bottom: 20rpx;

				.item {
					font-family: 阿里巴巴普惠体;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 24rpx;
					letter-spacing: 0px;
					color: #333333;
					margin: 15rpx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 30rpx;
				}

				.text {
					.status {
						font-family: 阿里巴巴普惠体;
						font-size: 22rpx;
						font-weight: normal;
						line-height: 24rpx;
						letter-spacing: 0px;

						color: rgba(255, 255, 255, 0.9216);
						width: 106rpx;
						height: 30rpx;
						border-radius: 102px;
						padding: 0 15rpx;
					}

					.item-status {
						background: #FF5866;
						border: 1px solid #FF5866;
					}

					.item-status1 {
						background: #00BC56;
						border: 1px solid #00BC56;
					}

					.item-status2 {
						background: #FFD26F;
						border: 1px solid #FFD60A;
					}

					.item-status3 {
						background: #999999;
						border: 1px solid #999999;
					}

					.item-status4 {
						background: #AE9CFE;
						border: 1px solid #AE9CFE;
					}
				}

				.vip {
					image {
						width: 84rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
}

.tabs {
	background-color: #ffffff;
	padding: 10rpx 0;

	.tabs-11 {
		display: flex;
		height: 60rpx;
		font-family: 阿里巴巴普惠体;
		font-size: 13px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		color: #999999;
		margin: 20rpx;

		.tabs-22 {
			justify-content: center;
			align-items: center;
			display: flex;
			margin: 10rpx 50rpx 10rpx 10rpx;
			padding-bottom: 20rpx;
		}

		.tabs-22.active {
			position: relative;
			transition: all 0.3s ease;
			font-family: 阿里巴巴普惠体;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
		}

		.tabs-22.active::after {
			border-radius: 3px;
			opacity: 1;
			background: #FF7883;
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 55rpx;
			height: 3px;
			transition: width 0.3s ease, opacity 0.3s ease;
		}
	}

	.tabs-1 {
		display: flex;
		height: 50rpx;
		margin: 20rpx;

		.tabs-2 {
			justify-content: center;
			align-items: center;
			display: flex;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
			flex: 1;
			margin-right: 20rpx;
		}

		.tabs-2.active {
			position: relative;
			line-height: 15px;
			transition: all 0.3s ease;
			border-radius: 22px;
			opacity: 1;
			background: #FF7883;
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: normal;
			letter-spacing: 0px;
			font-variation-settings: "opsz" auto;
			color: #FFFFFF;
			padding: 0 20rpx;
		}
	}


}

.tuijian-input {
	background: #F7F7F7;
	height: 68rpx;
	width: 520rpx;
	text-align: right;
	border-radius: 16rpx;
	padding-right: 30rpx
}
</style>